<template>
  <a-drawer title="复诊详情" placement="right" :closable="false" :visible="visible" width="70%" @close="onClose">
    <a-row>
      <a-col :span="20"
        ><p>时间:&nbsp;{{ visitDate }} &nbsp;{{ visitTime }}</p></a-col
      >
      <a-col :span="4"
        ><a-button class="end-button" type="primary" v-if="!isEnd" @click="end" :loading="confirmLoading">复诊结束</a-button></a-col
      >
    </a-row>
    <a-table
      :columns="detailColumns"
      :data-source="detailData"
      :pagination="false"
      :rowKey="
        (record, index) => {
          return index
        }
      "
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
      <a slot="showStatus" slot-scope="text, record">
        <template v-if="!isEnd">
          <div class="finish__icon" v-if="record.projectStatus == 1"></div>
          <div class="finish__icon unfinish__icon" v-else @click="handleClick(record)"></div>
        </template>
        <template v-else>
          <div class="finish__icon" v-if="record.projectStatus == 1"></div>
          <div class="finish__icon unfinish__icon" v-else></div>
        </template>
      </a>
    </a-table>

    <a-card :bordered="false" title="复诊记录">
      <template v-if="isEnd">
        <div style="padding: 0 15px">{{ flupContent }}</div>
      </template>
      <a-textarea
        v-else
        :maxLength="200"
        v-model="flupContent"
        placeholder="请填写复诊记录"
        :auto-size="{ minRows: 3, maxRows: 8 }"
      />
    </a-card>

    <a-card :bordered="false" title="患者评价">
      <template v-if="!isNotEmpty">
        <a-empty :image-style="{ height: '200px' }" style="margin-bottom: 10px">
          <img slot="image" src="~@/assets/evaluation-empty.png" alt="暂无评价" />
          <span style="color: gray" slot="description">当前暂无患者评价</span>
        </a-empty>
      </template>
      <template v-else>
        <a-row>
          <a-col :span="12">
            <span style="margin-right: 2rem">总体服务</span>
            <a-rate v-model="rate1" disabled />
          </a-col>
          <a-col :span="12">
            <span style="margin-right: 2rem">使用设备</span>
            <a-rate v-model="rate2" disabled />
          </a-col>
          <a-col :span="12">
            <span style="margin-right: 2rem">环境舒适度</span>
            <a-rate v-model="rate3" disabled />
          </a-col>
        </a-row>

        <a-row :style="{ marginTop: '1rem' }">
          <span style="margin-right: 2rem">其他建议</span>
          <span>{{ advise }}</span>
        </a-row>
      </template>
    </a-card>

    <a-modal
      v-model="mvisible"
      title="完成情况"
      ok-text="确认"
      cancel-text="取消"
      :confirm-loading="confirmLoading"
      @ok="updateStatus"
      @cancel="hideModal"
      width="400px"
    >
      <a-row style="margin-bottom: 20px">
        <a-col :span="6">复诊项目：</a-col>
        <a-col :span="10">{{ flup.projectName }}</a-col>
      </a-row>
      <a-row style="margin-bottom: 20px">
        <a-col :span="6">执行人：</a-col>
        <a-col :span="10">{{ operator }}</a-col>
      </a-row>
      <a-row style="margin-bottom: 20px">
        <a-col :span="6">备&nbsp;&nbsp;&nbsp;注：</a-col>
        <a-col :span="10">
          <a-textarea
            v-model="remark"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            :maxLength="50"
            placeholder="请输入备注内容，不超过50字"
            style="width: 280px"
          />
          <div v-if="remark.length > 0" style="position: absolute; left: 243px; top: 73px">{{ remark.length }}/50</div>
        </a-col>
      </a-row>
    </a-modal>

    <div class="drawer-bootom-button">
      <a-button style="margin-right: 10px" @click="onClose"> 取消 </a-button>
      <a-button type="primary" @click="handleOk" :loading="confirmLoading"> 确认 </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

const detailColumns = [
  {
    title: '复诊项目',
    dataIndex: 'projectName',
    width: 120
  },
  {
    title: '详情',
    width: 200,
    dataIndex: 'projectDetail'
  },
  {
    title: '备注',
    width: 200,
    dataIndex: 'projectSuggest'
  },
  {
    title: '完成情况',
    dataIndex: 'projectStatus',
    width: 120,
    scopedSlots: { customRender: 'showStatus' }
  },
  {
    title: '执行人',
    dataIndex: 'operator',
    width: 100
  }
]

const detailData = []

export default {
  name: 'VisitDetails',
  components: {},
  data() {
    return {
      detailData,
      detailColumns,
      confirmLoading: false,
      visible: false,
      mvisible: false,
      isEnd: false,
      visitTime: '',
      visitDate: '',
      advise: '',
      remark: '',
      flup: {},
      rate1: 0,
      rate2: 0,
      rate3: 0,
      date: {},
      flupContent: ''
    }
  },
  computed: {
    operator() {
      return JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.realname
    },
    isNotEmpty() {
      return this.rate1 || this.rate2 || this.rate3 || this.advise
    }
  },
  created() {},
  methods: {
    view(date) {
      this.visible = true
      this.date = date
      this.isEnd = date.status == '已复诊' ? true : false
      this.show(date)
    },
    onClose() {
      this.visible = false
    },
    handleOk(e) {
      if (!this.isEnd) {
        this.confirmLoading = true
        const params = {
          flupId: this.date.id,
          flupContent: this.flupContent
        }
        postAction('/flup/patient/content/update', params).then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.visible = false
          } else {
            this.$message.warning(res.message)
          }
        }).finally(_ => {
          this.confirmLoading = false
        })
      } else {
        this.visible = false
      }
    },
    show(date) {
      const params = {
        id: date.id
      }
      getAction('flup/patient/get', params).then(res => {
        if (res.success) {
          this.detailData = []
          this.visitDate = ''
          this.visitTime = ''
          this.rate1 = 0
          this.rate2 = 0
          this.rate3 = 0
          this.advise = ''
          this.flupContent = res.result.flupContent || ''

          if (res.result.projectRecords) {
            for (let i = 0; i < res.result.projectRecords.length; i++) {
              this.detailData.push({
                flupProjectId: res.result.projectRecords[i].flupProjectId,
                operator: res.result.projectRecords[i].operator,
                projectDetail: res.result.projectRecords[i].projectDetail,
                projectName: res.result.projectRecords[i].projectName,
                projectStatus: res.result.projectRecords[i].projectStatus,
                projectSuggest: res.result.projectRecords[i].projectSuggest
              })
            }
            this.visitDate = res.result.flupDate
            this.visitTime = res.result.flupTime
            this.advise = res.result.patientSuggest
            this.rate1 = res.result.patientEvaluationService
            this.rate2 = res.result.patientEvaluationEquipment
            this.rate3 = res.result.patientEvaluationComfort
          }
        }
      })
    },
    handleClick(item) {
      console.log(item)
      this.flup = item
      this.remark = ''
      this.mvisible = true
    },
    hideModal() {
      this.flup = {}
      this.remark = ''
      this.mvisible = false
    },
    async updateStatus() {
      this.confirmLoading = true

      const res = await postAction('/flup/patient/item/save', {
        flupProjectId: this.flup.flupProjectId,
        operator: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.username,
        projectName: this.flup.projectName,
        projectStatus: 1,
        projectSuggest: this.remark
      }).finally(_ => {
        this.confirmLoading = false
      })

      if (res.success) {
        this.$message.success(res.message)
        this.show(this.date)
        this.hideModal()
      } else {
        this.$message.error(res.message)
      }
    },
    end() {
      this.confirmLoading = true
      const params = {
        flupId: this.date.id,
        type: 2,
        flupContent: this.flupContent
      }
      postAction('/flup/patient/status/update', params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('end')
          this.visible = false
        } else {
          this.$message.warning(res.message)
        }
      }).finally(_ => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-card-head {
  border-bottom: none;
}
.end-button {
  float: right;
}
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 4px 4px;
}

.finish__icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: #52c41a;
  display: inline-block;
  position: relative;
}
.finish__icon:before,
.finish__icon::after {
  content: '';
  height: 28px;
  width: 6px;
  border-radius: 10px;
  display: block;
  background: white;
  position: absolute;
  top: 6px;
  /*40-6=34*/
  left: 20px;
  /*make the two rects in the middle of the cycle */
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.finish__icon::before {
  height: 15px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  position: absolute;
  top: 18px;
  /*40-18=12  */
  left: 8px;
}

.unfinish__icon {
  background: #d9d9d9;
}
</style>

